<template>
	<view v-if="list" class="content poRel">
		<swiper class="wid100 borRad10" style="height: 755rpx;" circular :autoplay='true'>
			<swiper-item v-for="(item,index) in list.pic.split(',')" :key="index">
				<image :src="url+item" class="wh100"></image>
			</swiper-item>
		</swiper>
		<view class="wid90 mar mar-top30 bacFFF borRad20"
			style="box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.2);padding: 35rpx 0;">
			<view class="wid90 mar">
				<view class="dis disAl disJuB">
					<view class="foSi40 fowe600 yclh" style="width: 85%;">{{list.name}}</view>
					<button class="bacFFF" open-type="share" style="width: 48rpx;height: 48rpx;">
						<image src="../../static/fenxiang1.png" class="wh100"></image>
					</button>
				</view>
				<view class="mar-top20 dis disAl disJuB">
					<view class="dis disAl">
						<view class="fowe600 foSi45" style="color: #37BCC3;">¥{{list.price}}</view>
						<view class="foSi30 poRel mar-left20" style="color: #858887;">
							<span>¥{{list.old_price}}</span>
							<view class="poAbs wid100" style="background-color: #858887;height: 1rpx;top: 20rpx;">
							</view>
						</view>
					</view>
					<view class="foSi25" style="color:#757575;">已售{{list.sell_num}}</view>
				</view>
			</view>
		</view>
		<view class="wid90 mar mar-top30 bacFFF borRad20"
			style="box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.2);padding: 35rpx 0;">
			<view class="wid90 mar foSi25">
				<view class="dis disAl">
					<view>发货：</view>
					<view class="mar-left10">{{list.hair}}</view>
					<view style="margin-left: 90rpx;">运费：</view>
					<view class="mar-left10">{{list.freight}}</view>
				</view>
				<view class="dis disAl mar-top30">
					<view>优惠：</view>
					<view class="mar-left10" style="color: #727272;">暂无可用优惠券</view>
				</view>
			</view>
		</view>
		<view class="wid90 mar mar-top30">
			<view class="foSi35 fowe600 mar-bott30 textCen" style="color: #37BCC3;">- 商品信息 -</view>
			<rich-text class="wid100" :nodes="list.content"></rich-text>
			<view style="height: 50rpx;"></view>
		</view>
		<view style="height: 120rpx;" :style="'padding-bottom: '+(bottomHight - 20)+'px;'"></view>
		<view class="wid100 bacFFF poFix" style="bottom: 0;box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.2);">
			<view class="wid90 mar dis disAl disJuB" style="height: 120rpx;">
				<view class="dis disAl" style="line-height: 0;">
					<view class="textCen" @click="tiaozhuan1('/pages/shoppingCart/shoppingCart')">
						<view class="mar" style="width: 46rpx;height: 44rpx;">
							<image src="../../static/gouuwuche2.png" class="wh100"></image>
						</view>
						<view class="mar-top15 foSi18" style="line-height: 20rpx;">购物车</view>
					</view>
					<view class="textCen mar-left30" @click="shouchang()">
						<view class="mar" style="width: 46rpx;height: 45rpx;">
							<image v-if="list.is_shoucang == 1" src="../../static/shouchang1.png" class="wh100"></image>
							<image v-if="list.is_shoucang == 0" src="../../static/shouchang2.png" class="wh100"></image>
						</view>
						<view class="mar-top15 foSi18" style="line-height: 20rpx;">收藏</view>
					</view>
					<view class="textCen mar-left30" @click="tiaozhuan('/pages/wode/service')">
						<view class="mar" style="width: 46rpx;height: 45rpx;">
							<image src="../../static/kefu3.png" class="wh100"></image>
						</view>
						<view class="mar-top15 foSi18" style="line-height: 20rpx;">客服</view>
					</view>
				</view>
				<view class="dis disAl">
					<view class="hei60 mar borRad40 dis disAl disJuC foSi30" @click="gouwuche()"
						style="color: #37BCC3;width: 210rpx;border: 1rpx solid #37BCC3;">加入购物车</view>
					<view class="hei60 mar borRad40 dis disAl disJuC foSi30 coFFF mar-left20"
						style="background-color: #37BCC3;width: 210rpx;border: 1rpx solid #37BCC3;"
						@click.stop="tiaozhuan('/pages/commodity/exchange?id='+list.id+'&is_pd=0')">立即下单</view>
				</view>
			</view>
			<view v-if="bottomHight != 0" :style="'height: '+(bottomHight - 10)+'px;'"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.global.url,
				bottomHight: 0,
				id: 0,
				list: ''
			}
		},
		onLoad(option) {
			let app = uni.getSystemInfoSync();
			this.bottomHight = app.safeAreaInsets.bottom //屏幕底部安全距离
			this.id = option.id
			this.getList()
		},
		// 自定义此页面的转发给好友(已经有全局的分享方法，此处会覆盖全局)
		onShareAppMessage(res) {
			var that = this;
			var imageUrl = this.url + this.list.pic.split(',')[0]
			return {
				title: this.list.name,
				path: '/pages/toiletries/commodity?id=' + this.list.id,
				imageUrl: imageUrl
			}
		},
		methods: {
			shouchang(){
				var that = this;
				var userinfo = uni.getStorageSync('userinfo')
				if(!userinfo){
					return uni.switchTab({url: '/pages/wode/wode'})
				}
				if(that.list.is_shoucang == 0){
					var urls = '/api/qianyu_petrol/gasstation_collect_add';
					var datas = {
						goods_id: that.id,
						is_type: 1,
						gas_station_id: uni.getStorageSync('jiaId')
					}
				}else{
					var urls = '/api/qianyu_petrol/gasstation_collect_del';
					var datas = {
						goods_id: that.id,
						is_type: 1,
						gas_station_id: uni.getStorageSync('jiaId')
					}
				}
				uni.request({
					url: that.global.url + urls,
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data:datas,
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							uni.showToast({
								title: '成功',
								icon: 'none',
								duration: 2000
							})
							if(that.list.is_shoucang == 0){
								that.list.is_shoucang = 1
							}else{
								that.list.is_shoucang = 0
							}
							// that.getList()
						}else{
							uni.showToast({
								title: result.msg,
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			},
			gouwuche(){
				var that = this;
				var userinfo = uni.getStorageSync('userinfo')
				if(!userinfo){
					return uni.switchTab({url: '/pages/wode/wode'})
				}
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_cars_add',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						goods_id: that.id,
						is_type: 1,
						gas_station_id: uni.getStorageSync('jiaId'),
						nums: 1
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							uni.showToast({
								title: '加入购物车成功',
								icon: 'none',
								duration: 2000
							})
						}else{
							uni.showToast({
								title: result.msg,
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			},
			getList() {
				var that = this;
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_goods_info',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						id: that.id
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							that.list = result.data
							that.list.content = that.list.content.replace(/class=/gi, "");
							that.list.content = that.list.content.replace(/<img /gi, "<img class='richImg'");
						}
					}
				})
			},
			tiaozhuan(url) {
				var that = this
				var userinfo = uni.getStorageSync('userinfo')
				if(!userinfo && url != '/pages/wode/service'){
					uni.switchTab({
						url: '/pages/wode/wode'
					})
				}else{
					uni.navigateTo({
						url: url
					})
				}
			},
			tiaozhuan1(url) {
				uni.switchTab({
					url: url
				})
			}
		}
	}
</script>

<style>
	.content {}

	.richImg {
		width: 100% !important;
		height: auto !important;
	}
</style>